﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
        .bgRed{
            background-color:red;
        }
        .bgYellow{
            background-color:yellow;
        }
        .bgBlue{
            background-color:blue;
        }
        .parent {
            display: flex;
            display:-webkit-flex;
            border: 1px solid #ddd;
            justify-content: center;
            align-items: center;
        }
        .item{
            color:#fff;
            
        }
    </style>
</head>
<body>



    <div class="parent">
        <div class="item bgRed" style="width:100px;height:80px;">
            width:100px;
        </div>
        <div class="item bgYellow" style="flex: 1; height: 50px;">
            flex:1
        </div>
        <div class="item bgBlue" style="flex: 2; height: 140px;">
            flex:2
        </div>
        <div class="item bgRed" style="width:120px; height: 140px; text-align:center;">
            flex:2
        </div>
    </div>
</body>
</html>
